<script lang="ts" setup>
import { ref } from "vue";

const dataList = ref<any>([
  {
    orderSn: "20250603000135589",
    amount: "50",
    status: "待支付",
    productName: "50元入场券抢占价值1980元八重豪礼+4节课（限新生体验）",
    createdAt: "2025-06-03 09:05:05",
    paymentTime: "-",
  },
  {
    orderSn: "20250603000135589",
    amount: "50",
    status: "待使用",
    productName: "50元入场券抢占价值1980元八重豪礼+4节课（限新生体验）",
    createdAt: "2025-06-03 09:05:05",
    paymentTime: "2025-06-03 09:05:05",
  },
  {
    orderSn: "20250603000133389",
    amount: "50",
    status: "已使用",
    productName: "50元入场券抢占价值1980元八重豪礼+4节课（限新生体验）",
    createdAt: "2025-06-03 09:05:05",
    paymentTime: "2025-06-03 09:05:05",
  },
]);
</script>

<template>
  <umrp-container bg-color="#f2f2f2" height="100%" padding="16px" :gap="16">
    <umrp-breadcrumb :items="['订单管理', '订单列表']"></umrp-breadcrumb>
    <umrp-search-card>
      <umrp-row :gutter="16">
        <umrp-col :span="8">
          <umrp-form-item label="订单编码">
            <umrp-input placeholder="订单编码"></umrp-input>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="8">
          <umrp-form-item label="下单时间">
            <umrp-datepicker> </umrp-datepicker>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="8">
          <umrp-form-item label="订单状态">
            <umrp-select>
              <umrp-option value="1">全部</umrp-option>
              <umrp-option value="2">待支付</umrp-option>
              <umrp-option value="2">待使用</umrp-option>
              <umrp-option value="3">已使用</umrp-option>
            </umrp-select>
          </umrp-form-item>
        </umrp-col>
      </umrp-row>
    </umrp-search-card>
    <umrp-card :border="false">
      <umrp-table :data="dataList">
        <template #columns>
          <umrp-table-column title="序号" data-index="id" :width="80"></umrp-table-column>
          <umrp-table-column title="订单编号" data-index="orderSn"></umrp-table-column>
          <umrp-table-column title="订单金额" data-index="amount" slot-name="amount"></umrp-table-column>
          <umrp-table-column title="支付金额" data-index="amount" slot-name="amount"></umrp-table-column>
          <umrp-table-column title="订单状态" data-index="status"></umrp-table-column>
          <umrp-table-column title="下单时间" data-index="createdAt"></umrp-table-column>
          <umrp-table-column title="支付时间" data-index="paymentTime"></umrp-table-column>
          <umrp-table-column title="操作" slot-name="action" :width="80"></umrp-table-column>
        </template>
        <template #amount="{ record }">
          <umrp-text-price>{{ record.amount }}</umrp-text-price>
        </template>
        <template #action>
          <umrp-space :size="10">
            <umrp-button type="primary" v-route="'XiaolankaAdminOrderDetail'">详情</umrp-button>
          </umrp-space>
        </template>
      </umrp-table>
    </umrp-card>
  </umrp-container>
</template>
